<template>
	<view class="recommends">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in list1" :key="index">
				<view class="swiper-item">
					<image mode="aspectFit" :src="item.src" @click="onSwiper(item)"></image>
					<!-- <image src="../../static/banner/1.jpg" mode=""></image> -->
				</view>
			</swiper-item>
		</swiper>
		<view class="cate flex">
			<view class="item" @click="scrollToAnchor('section1')">
				热销宠物
			</view>
			<view class="item" @click="scrollToAnchor('section2')">
				营养保健
			</view>
			<view class="item" @click="scrollToAnchor('section3')">
				猫粮用品
			</view>
			<view class="item" @click="scrollToAnchor('section4')">
				狗粮用品
			</view>
		</view>
		<view class="title" id="section1">
			<text>热销宠物</text>
			<card :dataList="datalist" :isDate="false" @onclickHandler="clickHandler"></card>
		</view>
		<view class="title2" id="section2">
			<text>养宠必备</text>
			<card :dataList="datalist" :isDate="false" @onclickHandler="clickHandler"></card>
		</view>
		<view class="title" id="section3">
			<text>猫粮</text>
			<card :dataList="datalist" :isDate="false" @onclickHandler="clickHandler"></card>
		</view>
		<view class="title" id="section4">
			<text>狗粮</text>
			<card :dataList="datalist" :isDate="false" @onclickHandler="clickHandler"></card>
		</view>
	</view>
</template>

<script>
	import card from "../../components/carditem/carditem.vue"
	export default {
		data() {
			return {
				list1: [{
						src: "../../static/banner/1.jpg",
						type: 1, // type:1宠物 0：商品
						goodsid: 0
					},
					{
						src: "../../static/banner/2.jpg",
						type: 0,
						goodsid: 1
					},
					{
						src: "../../static/banner/3.jpg",
						type: 1,
						goodsid: 3
					},
				],
				datalist: [{
						img: '../../static/logo.png',
						name: 'xiaoxiao',
						id: 0,
						hot: true
					},
					{
						img: '../../static/logo.png',
						name: 'xiaoxiao2',
						id: 1,
						hot: true
					},
				]
			};
		},
		onLoad(options) {
			if (options.section) {
				this.scrollToAnchor(options.section);
			}
		},
		components: {
			card
		},
		methods: {
			clickHandler() {
				uni.navigateTo({
					url: '/subpack/goods/goods'
				})
			},
			onSwiper(item) {
				uni.navigateTo({
					url: '/subpack/goods/goods?type=' + item.type + '&goodsid=' + item.goodsid
				})
			},
			scrollToAnchor(anchorId) {
				const query = uni.createSelectorQuery().in(this);
				// console.log(query, '1111')
				query.select(`#${anchorId}`).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						uni.pageScrollTo({
							scrollTop: res[0].top - uni.upx2px(200), // 调整滚动偏移量以适应导航栏等
							duration: 300,
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommends {
		.swiper {
			height: 450rpx;
		}

		.swiper-item {
			display: block;
			line-height: 300rpx;
			text-align: center;

			// background-color: red;
			image {
				width: 100%;
			}
		}

		.cate {
			margin: $uni-spacing-col-base;
			justify-content: space-evenly;
			padding: 12upx;
			background-color: $uni-text-color-red;
			color: white;
			border: 1px solid;
			height: 120rpx;
			line-height: 120rpx;
			border-radius: $uni-border-radius-base;

			.item {
				width: calc(100%/4);
				text-align: center;
				font-weight: 600;
			}
		}

		.title {
			margin: $uni-spacing-col-base;

			&>text {
				color: $uni-text-color-red;
				font-weight: 700;
			}
		}

		.title2 {
			margin: $uni-spacing-col-base;

			&>text {
				color: $uni-text-color-yellow;
				font-weight: 700;
			}
		}
	}
</style>